<template>
	<view class="account_conatiner">
		<u-row>
			<u-col>
				<view class="userInfo">
					<u-row>
						<u-col span="3">
							<u-avatar :src="userInfo.avatarUrl?userInfo.avatarUrl:defaultUrl" :default-url="defaultUrl"
								shape="circle" size="80">
							</u-avatar>
						</u-col>
						<u-col span="9" v-if="userInfo ? true : false">
							<view class="userInfo_text">
								{{ userInfo.nickName }}
							</view>
							<view class="userInfo_text">
								<!-- <u-button type="warning" text="测试" @click="test"></u-button> -->
								<u--text mode="price" size="17" color="white"
									:text="balance" />
							</view>
						</u-col>
						<u-col span="4" v-else>
							<u-button type="warning" text="未登录" @click="loginBtn"></u-button>
						</u-col>
					</u-row>
				</view>
			</u-col>
		</u-row>

		<view class="body">
			<view class="body_cell">
				<u-cell-group>
					<u-cell icon="/static/充值.png" title="充值" isLink url="/pages/recharge/recharge"></u-cell>
				</u-cell-group>
			</view>
			<view class="body_cell">
				<u-cell-group>
					<u-cell icon="/static/消费记录.png" title="消费记录" isLink url="/pages/consumptionLog/consumptionLog"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<appreciation-code></appreciation-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 0,
				loginCode: '',
				userInfo: '',
				defaultUrl: '/static/DefaultAvatar.jpeg',
			};
		},
		onPullDownRefresh() {
			this.loginCode = '';
			this.$axios.get('/PaymentScanCode/account/refresh').then(res => {
				if (res.data.code === 43008) {
					this.autoSetUserInfo()
					uni.stopPullDownRefresh();
					return
				}
				this.balance = res.data.data;
				uni.setStorageSync("balance", res.data.data);
				uni.stopPullDownRefresh();
			})
		},
		onLoad() {
			this.getLoginCode();
		},
		onShow() {
			const balance = uni.getStorageSync('balance')
			balance && (this.balance = balance)
		},
		methods: {
			toRecharge() {
				uni.navigateTo({
					url: '/pages/recharge/recharge'
				})
			},
			/**
			 * 页面加载获取 userInfo 登录信息
			 */
			autoSetUserInfo() {
				this.userInfo = uni.getStorageSync('userInfo')
				const balance = uni.getStorageSync('balance')
				balance && (this.balance = balance)
				if (!this.userInfo) {
					this.userInfo = ''
					this.defaultUrl = '/static/DefaultAvatar.jpeg'
					uni.removeStorageSync('token')
				}
			},
			/**
			 * 1、获取 Code 凭证
			 * 【入口方法】
			 */
			getLoginCode() {
				const token = uni.getStorageSync('token')
				if (token){
					this.autoSetUserInfo();
				}else {
					uni.login({
						success: res => {
							this.loginCode = res.code;
						}
					})
					uni.removeStorageSync('userInfo')
				}
			},
			/**
			 * 2、用户授权登录获取用户信息，请求 token
			 */
			loginBtn() {
				uni.getUserProfile({
					desc: "用于完善用户资料",
					success: (res) => {
						this.wxLogin(res.userInfo);
					}
				})
			},
			/**
			 * 3、请求 token
			 */
			wxLogin(userInfo) {
				this.$axios.post('/PaymentScanCode/wxLogin', {
					code: this.loginCode
				}).then(res => {
					if (res.data.code != 43000) {
						uni.showToast({
							icon: 'error',
							title: res.data.msg,
							duration: 2000
						});
						this.getLoginCode()
						return;
					} 
					this.balance = res.data.data.balance;
					this.userInfo = userInfo;
					uni.setStorageSync('balance', res.data.data.balance);
					uni.setStorageSync('token', res.data.data.token);
					uni.setStorageSync('userInfo', userInfo);
				})
			},
		}
	}
</script>

<style lang="scss">
	.account_conatiner {
		background-color: #f4f4f5;
		height: 100vh;

		.userInfo {
			height: 200rpx;
			background: #e48f0f;
			padding: 15rpx;

			.userInfo_text {
				color: white;
				padding: 13rpx;
			}
		}

		.body {
			height: 300rpx;
			width: 700rpx;
			margin: auto;
			position: relative;
			top: -50rpx;
			background: white;
			box-shadow: 1px 1px 0px 1px gainsboro;
			border-radius: 13rpx 13rpx 0 0;

			.body_cell {
				margin-bottom: 15rpx;
			}
		}
	}
</style>
